﻿<!DOCTYPE html>
<html>
<head>
    {include file="public/header" /}
    <style>
        #comment_list>ul>li{
            border-top:1px solid #e9e9e9 !important;
        }
        .loading-btn{
            padding-top: 10px;
            text-align: center;
        }
        .loading-btn button{
            border: none;
            background-color: #e9e9e9;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<!--[if IE]> <div class="browseupgrade">当前网页在您正在使用的浏览器下<strong>体验不佳</strong>，为了体验更好的访问效果， 请<a href="http://browsehappy.com/" target="_blank">升级你的浏览器</a>.</div> <![endif]-->
<body>
<div id="header_content">
    <div id="header" class="fixed-nav">
        {include file="public/nav" /}
    </div>
    <div id="container">
        <div id="search">
            <div class="search-content">
                <form name="search" method="post" class="s-form" action="https://www.songhaifeng.com/zb_system/cmd.php?act=search">
                    <input name="q" size="11" autocomplete="off" id="edtSearch" type="text" class="s-key" placeholder="请输入关键词，回车即可搜索。" style="border:0" />
                    <ul id="search-result" data-reusltnum="8"></ul>
                    <input value="搜 索" id="btnPost" type="submit" class="s-sub tra" style="display:none" />
                </form>
            </div>
            <div class="search-bg"></div>
        </div>
        <div id="ajx_content">
            <div id="main">
                <div class="warp">
                    <div class="breadcrumb">
                        <span>
                            <a href="https://www.songhaifeng.com/" title="小锋博客">&nbsp;首页&nbsp;</a>&nbsp;
                            <i class="fa fa-angle-double-right"></i>&nbsp;
                            <a href="https://www.songhaifeng.com/ZBlog-Course/" title="ZBlog教程">&nbsp;ZBlog教程&nbsp;</a>&nbsp;
                            <i class="fa fa-angle-double-right"></i>&nbsp;
                            正文
                        </span>
                    </div>
                    <div class="post">
                        <h1 class="post-title">
                            <a href="#" rel="bookmark" title="{$article.art_title}">{$article.art_title}</a>
                        </h1>
                        <div class="p_info">
                            <span class="info_author info_ico">
                                <i class="fa fa-user"></i> <a href="#" title="{$article.author_user}">{$article.author_user}</a>
                            </span>
                            <span class="info_date info_ico"><i class="fa fa-clock-o fa-fw"></i>{:date('Y-m-d H:i',$article.release_time)}</span>
                            <span class="info_category info_ico">
                                <i class="fa fa-folder-open"></i> <a href="https://www.songhaifeng.com/ZBlog-Course/" title="{$article.cate_name}" >{$article.cate_name}</a>
                            </span>
                            <span class="info_views info_ico">
                                <i class="fa fa-eye fa-fw"></i> {$article.browse_num}人围观
                            </span>
                            <span class="info_comment info_ico">
                                <i class="fa fa-comment-o fa-fw"></i> <a href="javascript:;" title="点击评论">{$commentNum}次吐槽</a>
                            </span>
                            <span style="font-size:12px;position:relative;top:-1px"></span>
                        </div>
                        <div class="main-content" rel="lightbox">
                            {$article.art_content}
                        </div>
                        <div class="p_msg">
                            <div class="p_tags">
                                <div class="tagcloud">
                                    <span> TAGS：
                                        {volist name="$article.labelArr" id="vo"}
                                        <a href="#" title="ZblogPhp" class="label bg-primary">{$vo}</a>
                                        {/volist}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="p-authorinfo">
                            <div class="p-copyright">
                                <p> 本站文章除注明转载/出处外，均为本站原创或翻译。若要转载请务必注明出处，尊重他人劳动成果共创和谐网络环境。 </p>
                                <p> 标题：{$article.art_title} </p>
                                <p> <script>document.write(this.location.href)</script> </p>
                            </div>
                            <div class="clear">
                            </div>
                        </div>
                        <div class="r-pn-post">
                            <div class="shang">
                                {if condition="$prev"}
                                <a title="{$prev.art_title}" href="{:url('index/page',array('article_id'=>$prev.article_id))}" rel="bookmark" class="prev_p">
                                    <span>上一篇 :</span> {$prev.art_title}
                                </a>
                                {else /}
                                <a title="没有了" href="#" rel="bookmark" class="prev_p">
                                    <span>上一篇 :</span> 没有了
                                </a>
                                {/if}
                            </div>
                            <div class="xia">
                                {if condition="$next"}
                                <a title="{$prev.art_title}" href="{:url('index/page',array('article_id'=>$next.article_id))}" rel="bookmark" class="next_p">
                                    <span>下一篇 :</span> {$next.art_title}
                                </a>
                                {else /}
                                <a title="没有了" href="#" rel="bookmark" class="prev_p">
                                    <span>下一篇 :</span> 没有了
                                </a>
                                {/if}
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <input type="hidden" id="post_id" value="144" />
                    <div class="post-comment-list" id="post-comment-list">
                        <div class="comment-tab">
                            <span class="come-comt"><i class="fa fa-comments"></i> 评论列表 <span id="comment_count">{$commentNum}条评论</span> </span>
                        </div>
                        <div class="comment-list" id="comment_list">
                            <!--评论列表-->
                        </div>
                        <div class="commentpost" id="comment">
                            <div class="user_conment">
                                <i class="fa fa-pencil"></i> 发表评论
                                <a rel="nofollow" id="cancel-reply" href="javascript:;" style="display:none;"><small>取消回复</small></a>
                            </div>
                            <form id="form1" onsubmit="return false" class="form form-horizontal" action="#" method="post">
                                <div class="inpName">
                                    <input type="text" name="comment_user" id="comment_user" placeholder="昵称：" class="text" size="28" tabindex="1" />
                                </div>
                                <div id="geetest" class="geetest"></div>
                                <div class="txaArticle">
                                    <div id="shortcut-reply">
                                        <span id="faces"><i class="fa fa-smile-o"></i></span>
                                        <a href="javascript:;" title="签到" id="sign"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:;" title="赞一个" id="praise"><i class="fa fa-thumbs-o-up"></i></a>
                                        <a href="javascript:;" title="踩一个" id="down"><i class="fa fa-thumbs-o-down"></i></a>
                                        <a href="javascript:;" title="加油" id="peace"><i class="fa fa-hand-peace-o"></i></a>
                                        <div id="UbbFrame" style="display: none;"></div>
                                    </div>
                                    <textarea name="comment" id="comment" class="textarea text" placeholder="文明用语，禁止广告 ... 如需得到博主回复，提交评论前请正确填写邮箱地址 ..." style="height: 142px;" cols="50" rows="4" tabindex="5" required=""></textarea>
                                </div>
                                <div class="inpsumbit inpsumbits">
                                    <input type="hidden" name="article_id" value="{$article.article_id}">
                                    <input href="#comment" name="sumbit" type="button" id="fuck" tabindex="6" value="提交评论" onclick="postForm1()" class="button" />
                                </div>
                            </form>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>

            <div id="sidebar">
                {include file="public/sidebar" /}
            </div>
        </div>
    </div>
    <div class="right-fixed">
        <div class="right-tool">
            <div class="a-box gotop" id="j-top"></div>
            <a href="https://www.songhaifeng.com/">
                <div class="a-box to_home"></div> </a>
            <a href="javascript:;">
                <div class="a-box to_comment" id="to_comment"></div> </a>
            <div class="a-box godown" id="j-down"></div>
        </div>
    </div>
</div>
<div id="footer">
    {include file="public/foot" /}
</div>
{include file="public/footer" /}
<script>
    var article_id = {$article.article_id};
    var page = 1;
    var listRows = 5;
    /*加载完成*/
    $(document).ready(function() {
        getComment();/*获取评论*/
        $("#comment_user").val(localStorage.getItem("comment_user"));/*设置昵称*/
    });

    /*获取评论*/
    function getComment() {
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('index/selCommentByArtId')}",
            data: {
                article_id : article_id,
                page : page,
                listRows : listRows
            },
            success: function (res) {
                var html = '<ul id="thecomments">';
                html += '<label id="AjaxCommentBegin"></label>';
                html += '<label id="cmt6538"></label>';
                for (var i=0;i<res.data.list.length;i++) {
                    html += '<li class="comment even thread-even depth-1 comment-first" id="comment-6538">';
                    html += '<div class="comment-avatar">';
                    html += '<img src="__STATIC__/index/picture/d4233105c070bffbe2ca5eac14b72d5c.png" class="avatar scrollLoading" width="40" height="40" alt="头像" />';
                    html += '</div>';
                    html += '<div class="comment-container">';
                    html += '<div class="comment-info">';
                    html += '<a title="'+res.data.list[i].comment_user+'" rel="nofollow" target="_blank" class="comment-author-url" href="#">'+res.data.list[i].comment_user+' </a>';
                    html += '<span>'+res.data.list[i].comment_time+'</span>';
                    // html += '<a class="comment-reply-link" href="javascript:void(0)" onclick="zbp.comment.reply(\'6538\')">回复Ta</a>';
                    html += '<div class="clr"></div>';
                    html += '</div>';
                    html += '</div>';
                    html += '<ul class="children">';
                    html += res.data.list[i].comment;
                    html += '<label id="AjaxComment6538"></label>';
                    html += '</ul>';
                    html += '</li>';
                }
                if (page < res.data.totalPage) {
                    html += '<div class="loading-btn"><button onclick="loadMore(this)">加载更多</button></div>';
                }
                html += '<div id="comments_paginate">';
                html += '<ul></ul>';
                html += '</div>';
                html += '<label id="AjaxCommentEnd"></label>';
                html += '</ul>';

                $("#comment_list").html(html);
            },
            error: function () {
                console.log("异常");
            }
        });
    }

    /*加载更多*/
    function loadMore(that) {
        page = page + 1;
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('index/selCommentByArtId')}",
            data: {
                article_id : article_id,
                page : page,
                listRows : listRows
            },
            success: function (res) {
                var html = '';
                for (var i=0;i<res.data.list.length;i++) {
                    html += '<li class="comment even thread-even depth-1 comment-first" id="comment-6538">';
                    html += '<div class="comment-avatar">';
                    html += '<img src="__STATIC__/index/picture/d4233105c070bffbe2ca5eac14b72d5c.png" class="avatar scrollLoading" width="40" height="40" alt="头像" />';
                    html += '</div>';
                    html += '<div class="comment-container">';
                    html += '<div class="comment-info">';
                    html += '<a title="'+res.data.list[i].comment_user+'" rel="nofollow" target="_blank" class="comment-author-url" href="#">'+res.data.list[i].comment_user+' </a>';
                    html += '<span>'+res.data.list[i].comment_time+'</span>';
                    // html += '<a class="comment-reply-link" href="javascript:void(0)" onclick="zbp.comment.reply(\'6538\')">回复Ta</a>';
                    html += '<div class="clr"></div>';
                    html += '</div>';
                    html += '</div>';
                    html += '<ul class="children">';
                    html += res.data.list[i].comment;
                    html += '<label id="AjaxComment6538"></label>';
                    html += '</ul>';
                    html += '</li>';
                }
                if (page < res.data.totalPage) {
                    html += '<div class="loading-btn"><button onclick="loadMore(this)">加载更多</button></div>';
                }

                $(that).parent().before(html);
                $(that).parent().remove();
            },
            error: function () {
                console.log("异常");
            }
        });
    }

    /*评论提交*/
    function postForm1() {
        $.ajax({
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('index/addComment')}",
            data: $('#form1').serialize(),
            success: function (res) {
                if (res.code == 1) {
                    alert(res.message);
                }
                if (res.code == 0) {
                    var comment_user = $("#comment_user").val();
                    parent.location.reload();
                }
            },
            error: function () {
                console.log("异常");
            }
        });
    }
</script>
</body>
</html>